<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<base href="${pageContext.request.contextPath}/">
	<link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<%--bootstrap-table核心css--%>
	<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css">
    <%--bootstrap-datetimepicker核心css--%>
	<link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
</head>
<body>

	<!-- 创建用户的模态窗口 -->
	<div class="modal fade" id="createUserModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增用户</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form" id="create-from">
					
						<div class="form-group">
							<label for="create-loginActNo" class="col-sm-2 control-label">登录帐号<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-loginActNo" >
								<sapn id="zh_span" style="color: red"></sapn>
							</div>
							<label for="create-username" class="col-sm-2 control-label">用户姓名</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-username">
							</div>
						</div>
						<div class="form-group">
							<label for="create-loginPwd" class="col-sm-2 control-label">登录密码<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="password" class="form-control" id="create-loginPwd">
								<span style="color: red" id="loginPWd_span"></span>
							</div>
							<label for="create-confirmPwd" class="col-sm-2 control-label">确认密码<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="password" class="form-control" id="create-confirmPwd">
								<span id="confirmPwd_span" style="color:red;"></span>
							</div>
						</div>
						<div class="form-group">
							<label for="create-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-email">
							</div>
							<label for="create-expireTime" class="col-sm-2 control-label">失效时间</label>
							<div class="col-sm-10" style="width: 300px;">
								<%--输入框组	设置为只读--%>
								<div class="input-group date myDateTime">
									<input type="text" class="form-control" id="create-expireTime" placeholder="失效时间" readonly>
									<%--设置一个字体图标addon     可以清除输入框里的内容remove--%>
									<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="create-lockStatus" class="col-sm-2 control-label">锁定状态</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-lockStatus">
								  <option></option>
								  <option value="1">启用</option>
								  <option value="0">锁定</option>
								</select>
							</div>
							<label for="create-deptNo" class="col-sm-2 control-label">部门<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-deptNo" placeholder="输入部门名称，自动补全">
							</div>
						</div>
						<div class="form-group">
							<label for="create-allowIps" class="col-sm-2 control-label">允许访问的IP</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-allowIps" style="width: 280%" placeholder="多个用逗号隔开">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="save()">保存</button>
				</div>
			</div>
		</div>
	</div>

	<%--修改用户的模态窗口--%>
	<div class="modal fade" id="editUserModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="editModalLabel">修改用户</h4>
				</div>
				<div class="modal-body">

					<form class="form-horizontal" role="form">
						<input type="hidden" id="edit-id">
						<div class="form-group">
							<label for="create-loginActNo" class="col-sm-2 control-label">登录帐号<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-loginAct">
								<sapn id="editzh_span" style="color: red"></sapn>
							</div>
							<label for="create-username" class="col-sm-2 control-label">用户姓名</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-name">
							</div>
						</div>
						<div class="form-group">
							<label for="create-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-email">
							</div>
							<label for="create-expireTime" class="col-sm-2 control-label">失效时间</label>
							<div class="col-sm-10" style="width: 300px;">
								<%--输入框组	设置为只读--%>
								<div class="input-group date myDateTime">
									<input type="text" class="form-control" id="edit-expireTime" placeholder="失效时间" readonly>
									<%--设置一个字体图标addon     可以清除输入框里的内容remove--%>
									<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="create-lockStatus" class="col-sm-2 control-label">锁定状态</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-lockStatus">
									<option></option>
									<option value="1">启用</option>
									<option value="0">锁定</option>
								</select>
							</div>
							<label for="create-deptNo" class="col-sm-2 control-label">部门<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-deptNo" placeholder="输入部门名称，自动补全">
							</div>
						</div>
						<div class="form-group">
							<label for="create-allowIps" class="col-sm-2 control-label">允许访问的IP</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-allowIps" style="width: 280%" placeholder="多个用逗号隔开">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="edit()">保存</button>
				</div>
			</div>
		</div>
	</div>

	<%--页面导航--%>
	<div>
		<ol class="breadcrumb">
			<li><a href="#">首页</a></li>
			<li><a href="#">权限管理</a></li>
			<li class="active">用户</li>
		</ol>
	</div>

	<%--表格部分--%>
	<div class="panel-body">
		<form id="searchForm" class="form-inline">
			<div class="form-group">
				<input type="text" id="name" placeholder="用户姓名" class="form-control">
			</div>
			<div class="form-group">
				<input type="text" id="deptno" placeholder="部门编号" class="form-control">
			</div>
			<div class="form-group">
				<label>锁定状态</label>
				<select id="lockState" class="form-control typeCodeSelect"></select>
			</div>
			<%----%>
			<div class="form-group">
				<%--输入框组	设置为只读--%>
				<div class="input-group date myDateTime">
					<input type="text" class="form-control" id="startTime" placeholder="开始时间" readonly>
					<%--设置一个字体图标addon     可以清除输入框里的内容remove--%>
					<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
				</div>
			</div>
			<%----%>
			<div class="form-group">
				<%--输入框组	设置为只读--%>
				<div class="input-group date myDateTime">
					<input type="text" class="form-control" id="endTime" placeholder="结束时间" readonly>
					<%--设置一个字体图标addon     可以清除输入框里的内容remove--%>
					<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
				</div>
			</div>
			<div class="form-group">
				<button type="button" class="btn btn-primary" onclick="$('#tab').bootstrapTable('refresh');">
					<span class="glyphicon glyphicon-search"></span>&ensp;搜索</button>
				<button type="button" class="btn btn-primary" onclick="$('#searchForm')[0].reset();$('#tab').bootstrapTable('refresh');">
					<span class="glyphicon glyphicon-calendar"></span>&ensp;清空</button>
			</div>
			<div class="form-group">
				<button type="button" class="btn btn-primary " onclick="$('#createUserModal').modal('show');">
					<span class="glyphicon glyphicon-plus"></span>&ensp;新增</button>
				<button type="button" class="btn btn-danger" onclick="removeBatch()">
					<span class="glyphicon glyphicon-trash"></span>&ensp;批量删除</button>
			</div>
		</form>
		<table id="tab" class="table table-hover table-striped table-bordered"></table>
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<%--bootstrap-table核心js--%>
	<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
	<%--bootstrap-table中文语言包--%>
	<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	<%--bootstrap-datetimepicker核心js--%>
	<script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<%--bootstrap-datetimepicker中文语言包--%>
	<script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</body>
<script type="text/javascript">

	//数据校验
	$('#create-loginActNo').blur(function () {
		var loginAct = $('#create-loginActNo').val();
		if (!loginAct){
			$('#zh_span').html('账户名不能为空');
			return false;
		}
		$.ajax('user/findByloginact',{
			type: 'get',
			data: {
				loginAct:loginAct
			},
			success:function (res) {
				if (res.data == null){
					$('#zh_span').html('账户名可用');
				}else {
					$('#zh_span').html('账户名已存在');
					return false;
				}
			}
		})
	});

	$('#create-confirmPwd').blur(function () {
		var loginPWd = $('#create-loginPwd').val();
		var confirmPwd = $('#create-confirmPwd').val();
		if (!loginPWd){
			$('#loginPWd_span').html('密码名不能为空');
		}
		if (!confirmPwd){
			$('#confirmPwd_span').html('确认密码不能为空')
		}
		if (loginPWd != confirmPwd){
			$('#confirmPwd_span').html('密码不一致')
		}
	});
/*	$("#create-loginActNo").focus(function () {
		$('#zh_span').html('');
	});*/
	//页面加载函数
	$(function () {
		//初始化表格
		initTable();
		//初始化下拉列表
		initSelect();
		//新增模态框隐藏时触发一个事件
		$('#createUserModal').on('hidden.bs.modal',function () {
			$('#create-from')[0].reset();
		});

        //日期框格式化
        $('.myDateTime').datetimepicker({
            //设置语言
            language:'zh-CN',
            //设置时间格式
            format:'yyyy-mm-dd hh:ii:ss',
            //周的起始
            weekStart:'1',
            //选择日期后自动关闭
            autoclose:true,
            //默认显示月历图
            startView:'month',
            //是否显示今天按钮
            todayBtn:true,
            //强制解析
            forceParse:false

        });
	});

	<%--初始化表格--%>
	function initTable() {
		//调用配置异步表格方法
		$('#tab').bootstrapTable({
			//表格配置项
			//表格高度
			/*height:500,*/
			//本地数据
			/*data:[
                {'id':1001,'name':'张三','age':30},
                {'id':1002,'name':'李四','age':32},
                {'id':1003,'name':'王五','age':33},
                {'id':1004,'name':'赵六','age':34},
                {'id':1005,'name':'马奇','age':35},
                {'id':1006,'name':'纪八','age':36},
            ],*/
			//http请求方式
			method:'get',
			//请求路径
			url:'user/page',
			//开启分页
			pagination:true,
			//设置分页的位置，server服务端分页，local前端分页
			sidePagination: 'server',
			//设置每页条数
			pageSize:10,
			//设置每页条数列表
			pageList:[10,20,50],
			paginationPreText: '上一页',
			paginationNextText: '下一页',
			//设置发送参数的格式‘’表示发送参数名字为pageNumber(起始偏移量)        pageSize(每页条数)
			// 不设置这个默认发的是offset(起始偏移量)  跟limit(每页条数)
			queryParamsType: '',
			//查询时的参数
			queryParams:function (params) {
				console.log(params+"sadasdadasda");
				//获取自定义的请求参数
				params.name=$('#name').val();
				params.deptno = $('#deptno').val();
				params.lockState = $('#lockState').val();
				params.startTime = $('#startTime').val();
				params.endTime = $('#endTime').val();
				return params
			},
			//处理响应的格式
			responseHandler:function (res) {
				if (res.code == 0){
					/**
					 * 如果开启分页
					 * bootstrap-table中分页要求的数据格式为
					 * {
					 *     rows:[],     //当前页列表数据
					 *     total:100    //总记录数
					 * }
					 */
					// return res.data;
					return{
						rows: res.data.list,
						total:res.data.total
					}

				}
			},
			//点击选中
			chickToSelect:true,
			//单选
			singleSelect:false,
			//工具栏
			toolar:'#searchForm',
			//辅助功能
			showRefresh: true,
			showToggle: true,
			showFullscreen: true,
			//表格中的列描述
			columns:[
				{
					//复选框
					checkbox:true
				},{
					field:'id',
					visible:false
				},{
					title:'登陆账户',
					field:'loginAct',
					halign:'center'
				},{
					title:'用户姓名',
					field:'name',
					halign:'center'
				},{
					//列名
					title:'部门名称',
					//列数据:数据从数据对象获取
					field:'deptNo',
					//表头对齐方法
					halign:'center'
				},{
					//列名
					title:'邮箱',
					//列数据:数据从数据对象获取
					field:'email',
					//表头对齐方法
					halign:'center'
				},{
					//列名
					title:'失效时间',
					//列数据:数据从数据对象获取
					field:'expireTime',
					//表头对齐方法
					halign:'center'
				},{
					//列名
					title:'允许访问IP',
					//列数据:数据从数据对象获取
					field:'allowIps',
					//表头对齐方法
					halign:'center'
				},{
					//列名
					title:'锁定状态',
					//列数据:数据从数据对象获取
					field:'lockState',
					//表头对齐方法
					halign:'center'
				},{
					//列名
					title:'创建者',
					//列数据:数据从数据对象获取
					field:'createBy',
					//表头对齐方法
					halign:'center'
				},{
					//列名
					title:'创建时间',
					//列数据:数据从数据对象获取
					field:'createTime',
					//表头对齐方法
					halign:'center'
				},{
					//列名
					title:'修改者',
					//列数据:数据从数据对象获取
					field:'editBy',
					//表头对齐方法
					halign:'center'
				},{
					//列名
					title:'修改时间',
					//列数据:数据从数据对象获取
					field:'editTime',
					//表头对齐方法
					halign:'center'
				},{
					//列名
					title:'操作',
					//表头对齐方法
					halign:'center',
					//数据对齐方法
					align:'center',
					//row表示一行内所有的数据
					formatter:function (value,row) {
						return '<button type="button" class="btn btn-warning btn-xs" onclick="openEdit(\''+row.id+'\')">编辑</button>&emsp;'+
								'<button type="button" class="btn btn-danger btn-xs" onclick="remove(\''+row.id+'\')">删除</button>&emsp;';
					}
				}
			]
		});
	}

/*	function checkExist() {
		var loginAct= $("#create-loginActNo").val();
		if(loginAct.length == 0){
			$("#zh_span").html("请输入内容");
			//输入框获取焦点
			window.setTimeout (function(){
				$('#create-loginActNo').select();
			},0 );
		}else if(loginAct.length != 0){
			alert("内容不为空");
		}
	}*/

	//验证账户名
	$(function () {

		/*if (!loginAct){
			alert(loginAct+"name2222")
			return false
		}*/

	});

	//新增
	function save(){
		$.ajax('user/add',{
			type: 'post',
			//设置发送请求的格式
			contentType:'application/json',
			//对象转json
			data:JSON.stringify({
				loginAct:$('#create-loginActNo').val(),
				name:$('#create-username').val(),
				loginPwd:$('#create-confirmPwd').val(),
				email:$('#create-email').val(),
				expireTime:$('#create-expireTime').val(),
				lockState:$('#create-lockStatus').val(),
				deptNo:$('#create-deptNo').val(),
				allowIps:$('#create-allowIps').val(),
			}),
			beforeSend:function () {
				var loginAct = $('#create-loginActNo').val();
				var name = $('#create-username').val();
				var loginPwd = $('#create-loginPwd').val();
				var confirmPwd = $('#create-confirmPwd').val();
				var lockState = $('#create-lockStatus').val();
				//js中的变量可放在if判断中，如果变量值为null/空字符串/undefined/0/NaN判断结果返回false
				if (!loginAct){
					alert("登陆账户不能为空");
					return false;
				}
				if (!name){
					alert("姓名不能为空");
					return false;
				}
				if (!loginPwd){
					alert("登陆密码不能为空");
					return false;
				}
				if (!confirmPwd){
					alert("确认密码不能为空");
					return false;
				}
				if (confirmPwd != loginPwd){
					alert("两次密码不一致");
					return false;
				}
				if (!lockState){
					alert("状态账户不能为空");
					return false;
				}
			},
			//接收响应
			success:function (res){
				if (res.code == 0){
					alert('新增成功');
					//刷新表格
					$('#tab').bootstrapTable('refresh');
					//隐藏模态框
					$('#createUserModal').modal('hide');
				}else {
					alert(res.message);
				}
			}
		});
	}

	//打开修改
	function openEdit(id){
		alert(id);
		$.ajax('user/find/'+id,{
			type:'get',
			success:function (res) {
				if (res.code == 0){
					$('#edit-id').val(res.data.id);
					$('#edit-loginAct').val(res.data.loginAct);
					$('#edit-name').val(res.data.name);
					$('#edit-email').val(res.data.email);
					$('#edit-expireTime').val(res.data.expireTime);
					$('#edit-lockStatus').val(res.data.lockState);
					$('#edit-deptNo').val(res.data.deptno);
					$('#edit-allowIps').val(res.data.allowIps);
					$("#editUserModal").modal('show');
				}
			}
		});
	}

	//修改
	function edit(){
		//数据校验

		$.ajax('user/edit',{
			type: 'put',
			//设置发送请求的格式
			contentType:'application/json',
			//对象转json
			data:JSON.stringify({
				id:$('#edit-id').val(),
				loginAct:$('#edit-loginAct').val(),
				name:$('#edit-name').val(),
				email:$('#edit-email').val(),
				expireTime:$('#edit-expireTime').val(),
				lockState:$('#edit-lockStatus').val(),
				deptNo:$('#edit-deptNo').val(),
				allowIps:$('#edit-allowIps').val()
			}),
			beforeSend:function () {
				var loginAct = $('#edit-loginAct').val();
				var name = $('#edit-name').val();
				var lockState = $('#edit-lockStatus').val();
				//js中的变量可放在if判断中，如果变量值为null/空字符串/undefined/0/NaN判断结果返回false
				if (!loginAct){
					alert("登陆账户不能为空");
					return false;
				}
				if (!name){
					alert("登陆账户不能为空");
					return false;
				}
				if (!lockState){
					alert("状态账户不能为空");
					return false;
				}
			},
			//接收响应
			success:function (res){
				if (res.code == 0){
					alert('修改成功');
					//刷新表格
					$('#tab').bootstrapTable('refresh');
					//隐藏模态框
					$('#editUserModal').modal('hide');
				}else {
					alert(res.message);
				}
			}
		});
	}

	//删除
	function remove(id) {
		if (confirm('确定要删除该条数据吗？')){
			$.ajax('user/delete',{
				type:'post',
				data:{
					_method:'delete',
					id:id
				},
				success:function (res) {
					if (res.code == 0){
						alert('删除成功');
						//刷新表格
						$('#tab').bootstrapTable('refresh');
					}else {
						alert(res.message);
					}
				}
			});
		}
	}

	//批量删除
	function removeBatch() {
		//获取用户的选择
		var rows = $('#tab').bootstrapTable("getSelections");
		console.log(rows);
		if (rows.length == 0){
			alert('请选择要删除的数据');
		}else {
			//如果用户点的取消 取反  结束方法
			if (!confirm('确定要删除该条数据吗?')){
				return;
			}
			//定义一个空的数组存储id
			var ids = [];
			$.each(rows,function () {
				//循环取出用户选择的id存入数组
				ids.push(this.id);
			});
			console.log(ids);
			$.ajax('user/removes',{
				// type:'delete',   delete请求 在ajax中无法携带参数
				type:'post',
				data:{
					'_method':'delete',
					//拼接起来 把数组中所有的元素拼接起来用逗号间隔
					ids:ids.join()
				},
				success:function (res) {
					if(res.code == 0){
						alert('删除成功');
						//刷新表格
						$('#tab').bootstrapTable('refresh');
					}else {
						alert(res.message);
					}
				}
			});
		}
	}

	//初始化关联数据下拉列表
	function initSelect() {
		$.ajax('dictionary/value/list',{
			type:'get',
			data:{
				typeCode:"lockState"
			},
			success:function (res) {
				if (res.code == 0){
					var str = '<option value=""></option>';
					$.each(res.data,function () {
						str += '<option value="'+this.value+'">'+this.text+'</option>';
					});
					$('.typeCodeSelect').html(str)
				}
			}
		});
	}
</script>

</html>